@import '../../../common';

.confirm-pay-container {
	@include container;

	.drivin-school {
		@include flex;

		image {
			@include size(40, 40);
		}

		text {
			@include fontStyle(32, 32, #000000, 500);
			margin-left: 10rpx;
		}
	}

	.driving-school-type {
		@include block;

		.car-type {
			@include flex-space-between;
			margin-top: 40rpx;

			.left {
				text {
					display: block;

					&.left_1 {
						@include fontStyle(32, 32, #000000, 500);
					}

					&.left_2 {
						margin-top: 20rpx;
						@include fontStyle(28, 28, #666666, 400);
					}
				}
			}

			.right {
				@include fontStyle(32, 32, #fe5953, 600);
				display: flex;
				align-items: center;

				text {
					font-size: 24rpx;
				}
			}
		}
	}

	.discount {
		@include block;
		@include flex-space-between;

		.name {
			@include fontStyle(28, 28, #000000);
		}

		.price {
			@include flex;


			text {
				&:nth-of-type(1) {
					background-color: #FE5953;
					@include fontStyle(24, 24, #FFFFFF);
					padding: 4rpx 8rpx;
					border-radius: 4rpx;
				}

				&:nth-of-type(2) {
					@include fontStyle(28, 28, #fe5953, 600);
					margin: 0 8rpx;
				}
			}

			image {
				@include size(24, 24);
			}
		}
	}

	.title {
		@include fontStyle(32, 32, #000000, 500);
	}

	.sign-up-box {
		@include block;



		.line {
			@include flex-space-between;
			padding: 36rpx 0;

			&.borderBottom {
				border-bottom: 1px solid #EEEEEE;

				&.error {
					border-color: #FE5953;
				}
			}

			.left {
				@include fontStyle(28, 28, #666666, 400);
				display: flex;
				align-items: center;
				text {
					color: #FE5953;
				}

				image {
					@include size(24, 24);
				}
			}

			.right {
				@include flex;
				@include fontStyle(28, 28, #666666, 400);
				width: 50%;
				justify-content: flex-end;
				input {
					width: 100%;
					text-align: right;
					@include fontStyle(28, 28, #000000, 400);
				}

				image {
					margin-left: 8rpx;
					@include size(24, 24);
				}
			}
		}


	}

	.pay-method {
		@include block;

		.item {
			@include flex-space-between;
			margin-top: 30rpx;

			.icon {
				@include flex;

				image {
					@include size(48, 48);
				}

				text {
					margin-left: 16rpx;
					@include fontStyle(32, 32, #000000);
				}
			}

			.status {
				@include size(24, 24, 50%);
				overflow: hidden;
				border: 1px solid #666666;

				image {
					@include size(24, 24);
				}
			}

			&.active {
				.status {
					background-color: var(--color-theme);
					border-color: var(--color-theme);
				}
			}
		}
	}

	.confirm-btn {
		padding: 60rpx 0 120rpx 0;

		view {
			@include size(100%, 90, 45rpx);
			@include flex-center;
			background-color: var(--color-theme);
			@include fontStyle(36, 36, #FFFFFF);
		}
	}
}